<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>黎世阁-商品</title>

    <link rel="stylesheet" href="css/swiper.min.css"/>
	<link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/goods.css"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;

                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        recalc();
    })(document, window);

    </script>

</head>
<style>
	.swiper-containerBox,.swiper-slide{
		height: 100%;
		overflow-y: scroll;
	}
</style>
<body>
<!--遮罩-->

<div class="msk_1"></div>
<div class="share_msk">
	<div class="share_msk_box">
		<ul class="login_icon clearfix">
			<li>
				<img src="img/login.png" alt="" />
				<span>微信</span>
			</li>
			<li>
				<img src="img/login_1.png" alt="" />
			    <span>QQ</span>
			</li>
			<li>
				<img src="img/login_2.png" alt="" />
				 <span>支付宝</span>
			</li>
			<li><img src="img/login_3.png" alt="" />
			 <span>新浪微博</span>
			</li>
		</ul>
		<div class="cross_icon">
			<i class="iconfont cross">&#xe609;</i>
		</div>
		 
	</div>
	
</div>
<div class="msk_box_1">
    <div class="shop_top">
        <div class="shop_img"><img src="img/msk_shop.jpg" alt=""/></div>
        <div class="shop_name_box fl">
            <span class="shop_name">书柜</span>
            <span class="shop_price">￥16800</span>
        </div>
        <i class="iconfont close">&#xe723;</i>
    </div>
    <div class="msk_middle">
        <div class="shop_item">
            <span class="msk_title fl">材质：</span>
            <div class="shop_box">
                <div class="quality special">进口松木/手绘艺术纸</div>
                <div class="quality">进口松木/手绘艺术纸</div>
            </div>
        </div>

        <div class="shop_item">
            <span class="msk_title fl">规格：</span>
            <div class="shop_box">
                <div class="quality special"> 长57.5X宽67.5X高2.8CM</div>
                <div class="quality"> 长57.5X宽67.5X高2.8CM</div>
            </div>
        </div>
        <div class="shop_item">
            <span class="msk_title fl">材质：</span>
            <div class="shop_box">
                <div class="quality special">棕色</div>
                <div class="quality">棕色</div>
            </div>
        </div>
        <div style="border-top:1px solid #EFEFEF;padding-top:0.4rem;" class="shop_item">
            <span class="msk_title fl">数量：</span>
            <div class="num_box">
                <i class="iconfont jian">&#xe729;</i>
                <input type="text" value="1"/>
                <i class="iconfont jia">&#xe727;</i>
            </div>
        </div>
    </div>
    <div class="msk_btn">加入购物车</div>

</div>
<!--遮罩-->

<!--头部开始-->
<header>
    <i class="iconfont left_jt">&#xe65b;</i>
    <div class="title">
        <a class="aborder" href="">商品</a>
        <a href="">详情</a>
        <a href="">评价</a>
    </div>
    <i class="iconfont share">&#xe613;</i>
</header>
<!--头部结束-->
<div class="swiper-containerBox">
	<div class="swiper-wrapper">
		<div class="swiper-slide">

		    <section class="section_box1 box" style="display: block;">
		        <!--轮播开始-->
		        <section class="banner">
		            <div class="swiper-container">
		                <div class="swiper-wrapper">
		                    <div class="swiper-slide"><img src="img/goods.jpg" alt=""/></div>
		                    <div class="swiper-slide"><img src="img/goods.jpg" alt=""/></div>
		                    <div class="swiper-slide"><img src="img/goods.jpg" alt=""/></div>
		                    <div class="swiper-slide"><img src="img/goods.jpg" alt=""/></div>
		                    <div class="swiper-slide"><img src="img/goods.jpg" alt=""/></div>
		                </div>
		                <div class="swiper-pagination"></div>
		            </div>
		        </section>
		        <!--轮播结束-->
		        <!--商品信息-->
		        <section class="shopInfo_1">
		            <span class="name">北欧现代伸缩落地灯</span>
		            <span class="price_icon">￥</span>
		            <span class="price">36,800</span>
		            <del>￥37888</del>
		            <div class="right">
		                <span class="people_num">666</span><span>人已购买</span>
		            </div>
		        </section>
		        <section class="shopInfo_2">
		            <span class="fare">运费：0.00 元</span>
		            <div class="send_right">
		                <span class="send">配送至 </span><span class="place">山西太原小店区</span>
		                <i class="iconfont cir">&#xe61b;</i>
		            </div>
		        </section>
		        <section class="shopInfo_2">
		            <span class="parameter fl">商品参数：</span>
		            <span class="box_box fl"></span>
		            <div class="circle_right fr">
		                <i class="iconfont circle">&#xe61b;</i>
		            </div>
		        </section>
		        <section class="shopInfo_2">
		            <span class="assess_1">评价</span>
		            <span>（已有 <span class="num">666</span> 人评价）</span>
		            <i class="iconfont jt">&#xe6a7;</i>
		        </section>
		        <section class="shopInfo_2">
		            <div class="ract"></div>
		            <span class="after_sale">售后信息</span>
		            <i class="iconfont jt">&#xe6a7;</i>
		        </section>
		        <!--商品信息-->
		        <!--猜你喜欢-->
		        <section class="like">
		            <div class="top">
		                <div class="ract_1"></div>
		                <span>猜你喜欢</span>
		                <div class="ract_1"></div>
		            </div>
		
		            <div class="swiper-container1">
		                <div class="swiper-wrapper">
		                    <ul class="swiper-slide">
		                        <li class="side">
		                            <div class="side_tu">
		                                <img src="img/shop_1.jpg" alt=""/>
		                            </div>
		                            <span>北欧现代伸缩落地灯</span>
		                            <span class="c_red">￥36,800</span>
		                        </li>
		                        <li class="side">
		                            <div class="side_tu">
		                                <img src="img/shop_2.jpg" alt=""/>
		                            </div>
		                            <span>北欧现代伸缩落地灯</span>
		                            <span class="c_red">￥36,800</span>
		                        </li>
		                    </ul>
		                    <ul class="swiper-slide">
		                        <li class="side">
		                            <div class="side_tu">
		                                <img src="img/shop_1.jpg" alt=""/>
		                            </div>
		                            <span>北欧现代伸缩落地灯</span>
		                            <span class="c_red">￥36,800</span>
		                        </li>
		                        <li class="side">
		                            <div class="side_tu">
		                                <img src="img/shop_2.jpg" alt=""/>
		                            </div>
		                            <span>北欧现代伸缩落地灯</span>
		                            <span class="c_red">￥36,800</span>
		                        </li>
		                    </ul>
		                    <ul class="swiper-slide">
		                        <li class="side">
		                            <div class="side_tu">
		                                <img src="img/shop_1.jpg" alt=""/>
		                            </div>
		                            <span>北欧现代伸缩落地灯</span>
		                            <span class="c_red">￥36,800</span>
		                        </li>
		                        <li class="side">
		                            <div class="side_tu">
		                                <img src="img/shop_2.jpg" alt=""/>
		                            </div>
		                            <span>北欧现代伸缩落地灯</span>
		                            <span class="c_red">￥36,800</span>
		                        </li>
		                    </ul>
		                </div>
		                <div class="swiper-pagination1"></div>
		            </div>
		        </section>
		        <!--猜你喜欢-->
		        <section class="left_slip">
		            <i class="iconfont right_jt">&#xe60a;</i>
		            向左滑，查看图文详情
		        </section>

		    </section>
        </div>
        <div class="swiper-slide">

				<section class="detailInfo clearfix">
				    <div class="clearfix">
				        <div class="deatil_item fl">
				            <p class="detail_name">品牌：<span>红苹果</span></p>
				            <p class="detail_name">商品系列：<span>Hoffman</span></p>
				        </div>
				        <div class="deatil_item fl">
				            <p class="detail_name">商品名称： <span>Hoffman书柜</span></p>
				            <p class="detail_name">商品货号：<span>104984</span></p>
				        </div>
				    </div>
				    <div class="deatil-item clearfix">
				        <p class="detail_name">材质：</p><span>美国红橡木/美国红橡木单板/E1级环保人造板/钢化玻璃</span>
				    </div>
				    <div class="deatil-item clearfix">
				        <p class="detail_name">规格：</p><span>长143X宽44X高202CM</span>
				    </div>
				    <div class="deatil-item clearfix">
				        <p class="detail_name">风格：</p><span>自然乡村,传统经典,海洋元素,个性混搭</span>
				    </div>
				    <div class="deatil-item clearfix">
				        <p class="detail_name fl">品牌介绍：</p>
				        <p>Hoffman书柜选用高贵的橡木材质打造而成的，在拉钩工艺和灰尘漆的完美处理下，呈现出一种充满质感的古旧风格。无论在客厅的一隅或是书房的转角，都能够与周围环境融为一体，它满腹书香的气韵总能让人回归宁静。
				            选用美国红橡木，橡木单板，及E1级环保人造板为主材，取自美国原始森林，具有鲜明的山形木纹，纹理美观大方，质地坚硬、密度高，经久耐用。</p>
				        <p>Hoffman 书柜经典美式风格，柜顶采用宫廷式房顶设计，书柜分上下两部分共五层，增大储物空间可作为书柜也可做展示柜或餐边柜使用，节约百搭。</p>
				    </div>
				    <div class="detail_tu"><img src="img/detail.jpg" alt=""/></div>
				</section>

        </div>
        <div class="swiper-slide">
        	
			<section class="assess">
				<nav class="clearfix">
					<ul class="pingjia clearfix">
						<li class="red_color">
							<span class="count">268</span>
							<span class="speak">全部评价</span>
						</li>
						<li>
							<span class="count">180</span>
							<span class="speak">好评</span>
						</li>
						<li>
							<span class="count">68</span>
							<span class="speak">中评</span>
						</li>
						<li>
							<span class="count">20</span>
							<span class="speak">差评</span>
						</li>
						<li>
							<span class="count">68</span>
							<span class="speak">晒单</span>
						</li>
					</ul>
	            </nav>
				<div>


					<div class="li_item" style="display: block;">
						<div class="speak_item clearfix">
							<div>
								<div class="people_img"></div>
								<div class="content">
									<span class="">小糯米</span>
									<div class="star_box clearfix">
										<img class="img1" src="img/star.png" alt="" />
										<img class="img1" src="img/star.png" alt="" />
										<img class="img1" src="img/star.png" alt="" />
										<img class="img1" src="img/star.png" alt="" />
										<img class="img2" src="img/star.png" alt="" />
									</div>
								</div>
								<span class="time">2016-09-02</span>
							</div>
							<div class="assess_content">这款书桌非常的漂亮，，看到的时候很惊喜呢！给身边朋友也介绍了，大家都赞不绝口！</div>
							<div class="type">
								<div>
									<span class="type_name">材质：</span><span class="material">进口松木/手绘艺术纸  </span>
								</div>
								<div>
									<span class="type_name">颜色： </span><span class="tinct">多色  </span>
								</div>
								<div>
									<span class="type_name">规格 : </span><span class="norms">长57.5X宽67.5X高2.8CMs</span>
								</div>
							</div>
						</div>
						<div class="speak_item clearfix">
							<div>
								<div class="people_img"></div>
								<div class="content">
									<span class="">小糯米</span>
									<div class="star_box clearfix">
										<img class="img1" src="img/star.png" alt="" />
										<img class="img1" src="img/star.png" alt="" />
										<img class="img1" src="img/star.png" alt="" />
										<img class="img1" src="img/star.png" alt="" />
										<img class="img2" src="img/star.png" alt="" />
									</div>
								</div>
								<span class="time">2016-09-02</span>
							</div>
							<div class="assess_content">这款书桌非常的漂亮，，看到的时候很惊喜呢！给身边朋友也介绍了，大家都赞不绝口！</div>
							<div class="assess-tu">
								<img src="img/assess.png" alt="" />
								<img src="img/assess.png" alt="" />
								<img src="img/assess.png" alt="" />
							</div>
							<div class="type">
								<div>
									<span class="type_name">材质：</span><span class="material">进口松木/手绘艺术纸  </span>
								</div>
								<div>
									<span class="type_name">颜色： </span><span class="tinct">多色  </span>
								</div>
								<div>
									<span class="type_name">规格 : </span><span class="norms">长57.5X宽67.5X高2.8CMs</span>
								</div>
							</div>
						</div>
					</div>
					<div class="li_item">
						差评
					</div>
					<div class="li_item">
						好评
					</div>
					<div class="li_item">
						啊啊啊评
					</div>
					<div class="li_item">
						阿迪的说法
					</div>
				</div>

            </section>
        </div>
	</div>
</div>
<footer>
	<ul class="footer_list clearfix">
		<li class="item_kefu">
			<i class="iconfont kefu">&#xe65a;</i>
			<br>
			<span>客服</span>
		</li>
		<div class="line"></div>
		<li class="item_kefu first">
			<i class="iconfont kefu">&#xe870;</i>
			<br>
			<span>收藏</span>
		</li>
		<li class="item_button addCar">

			<div>加入购物车</div>
		</li>
		<li class="item_button mai">
			<div>立即购买</div>
		</li>
	</ul>

</footer>
</body>

<script>

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        onTouchEnd: function(swiper){
         if(swiper.isEnd){

             mySwiper.slideTo(1,500,false);
            }else{

            }

        }
//      loop: true
//      autoplay: 3000
    });

    var swiper = new Swiper('.swiper-container1 ', {
        pagination: '.swiper-pagination1',
        paginationClickable: true,
        spaceBetween: 0

    });

    $(".share").click(function(){
    	
    	$(".share_msk").fadeIn();
    })
    $(".cross").click(function(){
    	$(".share_msk").fadeOut();
    	
    })
    
    $(".circle").click(function () {
        event.preventDefault();
        $(".msk_box_1").slideDown();
        setTimeout("$('.msk_1').fadeIn()", 200);
        $("body").css("overflow", "hidden");
    });
    $(".close").click(function () {
        $(".msk_box_1").slideUp();
        setTimeout("$('.msk_1').fadeOut()", 200);
        $('body').css('overflow', 'auto');
    });
    $(".quality").click(function () {
//  	var index=$(this).index(".quality");
        $(this).addClass("special").siblings().removeClass("special");
    });
    $(".msk_btn").click(function () {
        $(".box_box").text($(".special").text());
        $(".msk_box_1").slideUp();
        setTimeout("$('.msk_1').fadeOut()", 200);
        $('body').css('overflow', 'auto');
    });
    $(".first").click(function () {
//      event.preventDefault();
        $(this).find('i').html('&#xe86f').addClass('color_red');
        $(this).find('span').text('已收藏');
    });

   $(".addCar,.mai").click(function(){
   	    event.preventDefault();
        $(".msk_box_1").slideDown();
        setTimeout("$('.msk_1').fadeIn()", 200);
        $("body").css("overflow", "hidden");
    	
    })
  
    var mySwiper = new Swiper('.swiper-containerBox', {

        speed:500,
        pagination: '.swiper-pagination2',
        paginationClickable: true,
        onSlideChangeEnd: function (swiper) {
            var j=mySwiper.activeIndex;
            $('.title a').removeClass('aborder').eq(j).addClass('aborder');
        }

    })
    $('.title a').on('click', function (e) {
        e.preventDefault();
        //得到当前索引
        var i=$(this).index();
        $('.title a').removeClass('aborder').eq(i).addClass('aborder');
        mySwiper.slideTo(i,500,false);
    });

	$(".jia").click(function(){
		var n=$(this).prev().val();
		var num=parseInt(n)+1;
		if(num==0){ return;}
		$(this).prev().val(num);
	});
	//减的效果
	$(".jian").click(function(){
		var n=$(this).next().val();
		var num=parseInt(n)-1;
		if(num==0){ return}
		$(this).next().val(num);
	});
	
	
</script>
</html>
